<template>
  <div>
    <div class="viewport">
      <!-- 信息列 左 -->
      <div class="Information">
        <div class="top_box">
          <div class="inner">
            <ul>
              <li>
                <h4>2,190</h4>
                <p>
                  <i class="icon-dot"></i>
                  <span>设备总数</span>
                </p>
              </li>
              <li>
                <h4>2,190</h4>
                <p>
                  <i class="icon-dot" style="color: #68cba3;"></i>
                  <span>设备总数</span>
                </p>
              </li>
              <li>
                <h4>2,190</h4>
                <p>
                  <i class="icon-dot" style="color: #68cba3;"></i>
                  <span>设备总数</span>
                </p>
              </li>
              <li>
                <h4>2,190</h4>
                <p>
                  <i class="icon-dot" style="color:red;"></i>
                  <span>设备总数</span>
                </p>
              </li>
            </ul>
          </div>
        </div>
        <div class="center_box">
          <div class="inner">
            <div class="tabs">
              <a href="javascript:;" class="active">故障设备监控</a>
              <a href="javascript:;">异常设备监控</a>
            </div>
            <div class="center">
              <div class="head">
                <span class="col">故障时间</span>
                <span class="col">设备地址</span>
                <span class="col">异常代码</span>
              </div>
            </div>
            <div class="center_view">
              <div class="view">
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
                <div class="row">
                  <span class="col">2019061</span>
                  <span class="col">北京市目平区城四金燕龙写字楼 </span>
                  <span class="col">100002</span>
                  <i class="icon-dot"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="button_box">
          <div class="inner">
            <div class="echart">
              <h3>点位分布统计</h3>
              <div class="chart">
                <my-pie></my-pie>
                <div class="data">
                  <h4>320,11</h4>
                  <p><i class="icon-dot" style="color: red;"></i> <span>点位总数</span></p>
                  <h4>418</h4>
                  <p><i class="icon-dot" style="color: #eacf19;"></i> <span>本月新增</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 地图列 中 -->
      <div class="MapColumn">
        <div class="top_box">
          <h3>设备数据统计</h3>
          <my-map></my-map>
        </div>
        <div class="button_box">
          <div class="inner">
            <h3>全国用户用量统计</h3>
            <div class="cart">
              <my-bar></my-bar>
              <div class="right_box">
                <h4>320,11</h4>
                <p><i class="icon-dot" style="color: red;"></i> <span>点位总数</span></p>
                <h4>418</h4>
                <p><i class="icon-dot" style="color: #eacf19;"></i> <span>本月新增</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 销售列 右 -->
      <div class="sale">
        <div class="top_box">
          <div class="inner">
            <div class="tabs">
              <a href="javascript:;" class="active">365天</a>
              <a href="javascript:;">90天</a>
              <a href="javascript:;">30天</a>
              <a href="javascript:;">24小时</a>
            </div>
            <ul>
              <li>
                <h3>20,301,987</h3>
                <p><i class="icon-dot" style="color: red;"></i><span>订单量</span></p>
              </li>
              <li>
                <h3>99834</h3>
                <p><i class="icon-dot" style="color: #eacf19;"></i><span>销售额(万元)</span></p>
              </li>
            </ul>
          </div>
        </div>
        <div class="top_center_box">
            <my-line ></my-line>
        </div>
        <div class="center_box">
          <div class="bar_box">
            <div class="inner">
              <h3>渠道分布</h3>
              <my-radar></my-radar>
              >
            </div>
          </div>

          <div class="bar_box1">
            <div class="inner">
              <h3>一季度销售进度</h3>

            </div>
          </div>
        </div>
        <div class="buttom_box">
          <div class="inner">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myPie from '@/components/myPie.vue'
import MyMap from './components/myMap.vue'
import MyBar from './components/myBar.vue'
import MyRadar from './components/myRadar.vue'
import myLine from './components/myLine.vue'
export default {
  components: { myPie, MyMap, MyBar, MyRadar, myLine },
  data() {
    return {
     
    }
  },
}
</script>

<style scoped>
@import url('~@/assets/css/main.css');
</style>